{include file="$header" /}
<div class="mk-app-warp mk-card-tabs">
	<el-tabs v-model="tabsName" type="card">
		<el-tab-pane label="基础配置" name="basics">
		    <div class="mk-pane-warp">
				<el-form ref="basicsForm" :model="basicsForm" label-width="100px">
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.email}{/literal}"><div>公司邮箱：</div></el-tooltip></div>
						</template>
						<el-input v-model="basicsForm.email"></el-input>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.telephone}{/literal}"><div>公司电话：</div></el-tooltip></div>
						</template>
						<el-input v-model="basicsForm.telephone"></el-input>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.phone}{/literal}"><div>手机号码：</div></el-tooltip></div>
						</template>
						<el-input v-model="basicsForm.phone"></el-input>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.fax}{/literal}"><div>公司传真：</div></el-tooltip></div>
						</template>
						<el-input v-model="basicsForm.fax"></el-input>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.address}{/literal}"><div>公司地址：</div></el-tooltip></div>
						</template>
						<el-input v-model="basicsForm.address"></el-input>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.business_hours}{/literal}"><div>营业时间：</div></el-tooltip></div>
						</template>
						<el-input v-model="basicsForm.business_hours"></el-input>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.ico}{/literal}"><div>地址栏ico：</div></el-tooltip></div>
						</template>
						<el-upload
                            :action="admin_url('file/uploadAppoint')"
                            :data="{name: 'favicon', ext: 'ico'}"
                            :show-file-list="false"
                            :on-success="icoSuccess"
                            :before-upload="icoUpload"
                            accept=".ico">
                            <el-image :src="domain + basicsForm.ico" style="width: 30px;height: 30px;">
                                <div slot="error" class="image-slot">
                                    <img class="error-image" :src="static + '/images/error.png'"/>
                                </div>
                            </el-image>
                        </el-upload>
                        <span>
                        	建议尺寸 32 * 32 (像素)的.ico文件。
                        	<el-link href="https://www.baidu.com/s?wd=ico" target="_blank">点击制作ICO</el-link> 
                            如果无法正常显示新上传图标，请空浏览器缓存后访问。
                        </span>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.logo}{/literal}"><div>网站Logo：</div></el-tooltip></div>
						</template>
						<mk-file-select v-model="basicsForm.logo"></mk-file-select>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.copyright}{/literal}"><div>版权信息：</div></el-tooltip></div>
						</template>
						<el-input v-model="basicsForm.copyright"></el-input>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.seo_title}{/literal}"><div>网站标题：</div></el-tooltip></div>
						</template>
						<el-input v-model="basicsForm.seo_title"></el-input>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.seo_keywords}{/literal}"><div>网站关键词：</div></el-tooltip></div>
						</template>
						<el-input v-model="basicsForm.seo_keywords" placeholder="关键词请用逗号(,)隔开"></el-input>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.seo_description}{/literal}"><div>网站描述：</div></el-tooltip></div>
						</template>
						<el-input type="textarea" v-model="basicsForm.seo_description"></el-input>
					</el-form-item>
					<el-form-item>
						<template slot="label">
							<div><el-tooltip placement="top" content="{literal}{$basicsForm.icp}{/literal}"><div>备案号：</div></el-tooltip></div>
						</template>
						<mk-editor v-model="basicsForm.icp"></mk-editor>
					</el-form-item>
					<el-form-item if="editAuthority">
						<el-button 
							:loading="loading" 
							type="primary" 
							icon="el-icon-refresh-right" 
							@click="saveConfig('基础配置', basicsForm)">
							保 存
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-tab-pane>
		<el-tab-pane v-for="(item, index) in themes" :label="item.tips" :name="item.name" :key="index">
			<div class="mk-pane-warp">
				<el-form label-width="0">
	                <el-form-item>
	                    <mk-field v-model="item.config" search></mk-field>
	                </el-form-item>
	                <el-form-item label-width="120px">
		                <el-button 
							:loading="loading" 
							type="primary" 
							icon="el-icon-refresh-right" 
							@click="saveConfig(item.title + '主题配置', item.config, 'theme')">
							保 存
						</el-button>
					</el-form-item>
	            </el-form>
			</div>
		</el-tab-pane>
		<el-tab-pane label="邮箱配置" name="email">
			<div class="mk-pane-warp">
				<el-form ref="emailForm" :rules="emailRules" :model="emailForm" label-width="150px">
					<el-form-item label="SMTP服务器地址：" prop="smtp">
						<el-input v-model="emailForm.smtp" placeholder="如：smtp.qq.com"></el-input>
					</el-form-item>
					<el-form-item label="发件人邮箱：" prop="email">
						<el-input v-model="emailForm.email" placeholder="如：xxxx@qq.com"></el-input>
					</el-form-item>
					<el-form-item label="发件人名字：" prop="sender">
						<el-input v-model="emailForm.sender" placeholder="如：OneKeyAdmin"></el-input>
					</el-form-item>
					<el-form-item label="客户端授权密码：" prop="password">
						<el-input type="password" v-model="emailForm.password" show-password></el-input>
						例：获取QQ邮箱客户端授权密码，登录<a href="https://mail.qq.com/" target="_blank">QQ邮箱</a>->点击首页左上角设置->账户->账户安全->生成授权码
					</el-form-item>
					<el-form-item label="协议方式：" prop="sendstyle">
						<el-radio-group v-model="emailForm.sendstyle">
							<el-radio label="ssl">ssl协议</el-radio>
							<el-radio label="tls">tls协议</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item if="editAuthority">
						<el-button 
							:loading="loading" 
							type="primary" 
							icon="el-icon-refresh-right" 
							@click="saveConfig('邮箱配置', emailForm)">
							保 存
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-tab-pane>
		<el-tab-pane v-if="userForm.length > 0" label="会员配置" name="user">
			<div class="mk-pane-warp">
				<el-form ref="userForm" :model="userForm" label-width="150px">
		            <el-form-item label="" label-width="0" prop="userForm">
			            <mk-field v-model="userForm" :ifset="false" label-width="150px"></mk-field>
			        </el-form-item>
					<el-form-item if="editAuthority">
						<el-button 
							:loading="loading" 
							type="primary" 
							icon="el-icon-refresh-right" 
							@click="saveConfig('用户配置', userForm)">
							保 存
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-tab-pane>
		<el-tab-pane v-for="(item, index) in hook" :label="item.title" :name="item.name">
			<iframe style="width: 100%;border: 0px" :style="{'height':iframeHeight}" :src="admin_url(item.url)"></iframe>
		</el-tab-pane>
	</el-tabs>
</div>
{include file="$component" /}
<script>
	new Vue({
	    el: '#app',
	    data() {
	        return {
	        	tabsName: 'basics',
	        	url: "config/index",
	        	editUrl: "config/update",
	        	loading: false,
	        	basicsForm: {:json_encode($basics)},
	        	emailForm: {:json_encode($email)},
	        	userForm: {:json_encode($userHook)},
	        	themes: {:json_encode($themes)},
	        	hook: {:json_encode($hook)},
	        	iframeHeight: window.innerHeight - 120 + 'px',
	        	emailRules: {
	        		smtp: [
			            { required: true, message: '请填写SMTP服务器地址', trigger: 'blur' },
			        ],
			        email: [
			            { required: true, message: '请填写发件人邮箱', trigger: 'blur' },
			        ],
			        password: [
			            { required: true, message: '请填写客户端授权密码', trigger: 'blur' },
			        ],
			        sender: [
			            { required: true, message: '请填写发件人名字', trigger: 'blur' },
			        ],
			        sendstyle: [
			            { required: true, message: '请选择协议方式', trigger: 'blur' },
			        ],
	        	}
	        }
	    },
	    computed: {
            editAuthority() {
                return authorityPath.indexOf(this.editUrl) !== -1;
            },
        },
        mounted () {
            window.onresize = () => {
                return (() => {
                    this.iframeHeight = window.innerHeight - 120 + 'px';
                })()
            }
        },
	    methods: {
	        /**
             * 保存基础配置
             */
	        saveConfig(title, value, type="") {
	        	let self = this;
	        	self.loading = true;
	        	request.post(self.editUrl, {title: title, name: self.tabsName, value: value, type: type}, function(res){
                    self.loading = false;
                    self.$message({showClose: true, message: res.message, type: res.status});
                });
	        },
	        /**
	         * ico设置成功
	         */
	        icoSuccess(res, file) {
	            if (res.status === 'success') {
	            	this.basicsForm = Object.assign({}, this.basicsForm, {ico: res.url + '?' + Math.floor(Math.random()*10000000)});
	            } else {
	                this.$message.error(res.message);
	            }
	            
	        },
	        /**
	         * 上传ico
	         */
	        icoUpload(file) {
	        	console.log(file.type)
	            const isJPG  = file.type === 'image/x-icon';
	            const isLt2M = file.size / 1024 / 1024 < 1;
	            if (!isJPG) {
	                this.$message.error('上传地址栏ico只能是 ico 格式!');
	            }
	            if (!isLt2M) {
	                this.$message.error('上传地址栏ico大小不能超过 1MB!');
	            }
	            return isJPG && isLt2M;
	        }
	    },
	})
</script>
{include file="$footer" /}